import {getCurrentInstance, reactive, ref} from "vue";
import {delMenuById, getMenuById, insertMenu, MenuForm, updateMenu, UpdateMenuForm} from "@/api/system/menu";
import useTable, {Menu} from "@/views/system/menu/hooks/useTable";
import {ElMessage, ElMessageBox} from "element-plus";
import useButtonDisabled from "@/hooks/useButtonDisabled/useButtonDisabled";
function useForm() {
    const instance =  getCurrentInstance()
    const {getDataList} = useTable()
    const {btnDisabled,clearBtnDisabled} = useButtonDisabled()
    const menuForm = reactive<MenuForm>({
        name:"",
        path:"",
        component:'',
        dataStatus:1,
        type:1,
        sort:0,
        isShowMenu: 1
    })
    const rules = reactive({
        name:[
            {required:true,message:'菜单名称不能为空',trigger:'blur'},
            {min:0,max:100,message: '菜单名称不能超过10个字符',trigger: 'blur'}
        ],
        path:[
            {required:true,message:'访问路径不能为空',trigger:'blur'}
        ],
        component:[
            {required:true,message:'组件地址不能为空',trigger:'blur'}
        ]
    })
    const menuFormReactive  = reactive({
        menuForm
    })
    const visible = ref<boolean>(false)
    let isEdit = false
    function addMenu(parentId?: number) {
        isEdit =false
        menuFormReactive.menuForm.parentId = parentId
        visible.value = true
    }
    function editMenu(id: number) {
        getMenuById(id).then(res=>{
            menuFormReactive.menuForm = reactive(res.data)
            isEdit = true
            visible.value =true
        })
    }
    async function delMenu(row: Menu) {
        try {
            await ElMessageBox.confirm(`确定要删除（${row.name}）菜单吗？`,"提示",{
                type:"warning"
            })
            delMenuById(row.id).then(()=>{
                ElMessage.success("删除成功")
                getDataList()
            })
        }catch (e) {
           console.log("取消删除")
        }
    }
    function resetMenuForm() {
        menuFormReactive.menuForm = reactive({
            name:"",
            path:"",
            component:'',
            dataStatus:1,
            type:1,
            sort:0,
            isShowMenu: 1
        })
    }
    function submit(e: MouseEvent) {
        //eslint-disable-next-line
        (instance?.refs.menuFormRef as any).validate((valid: boolean)=>{
            if(!valid){
                return
            }
            btnDisabled(e)
            if(isEdit){
                updateMenu(menuFormReactive.menuForm as UpdateMenuForm ).then(()=>{
                    ElMessage.success("更新成功")
                    getDataList()
                    visible.value = false
                    clearBtnDisabled(e)
                }).catch(()=>{
                    clearBtnDisabled(e)
                })
            }else {
                insertMenu(menuFormReactive.menuForm).then(()=>{
                    ElMessage.success("添加成功")
                    getDataList()
                    visible.value = false
                    clearBtnDisabled(e)
                }).catch(()=>{
                    clearBtnDisabled(e)
                })
            }
        })
    }
    return {
        visible,
        menuFormReactive,
        rules,
        resetMenuForm,
        submit,
        addMenu,
        editMenu,
        delMenu
    }
}
export default useForm
